import { Button, Toast } from "antd-mobile";
import React, { useState } from "react";
import { useNavigate } from "react-router-dom";
import $fetch from "../../../../utils/app/$fetch";
import BuyProtocol from "./BuyProtocol";
import RefundProtocol from "./RefundProtocol";

const StepTwo = ({ state, dispatch }: any) => {
  const [payType, setPayType] = useState(0);
  const navigate = useNavigate();

  const handleBuy = async () => {
    if (!state?.isReaded) {
      Toast.show("请阅读并同意购买守则、取消政策退款政策！");
      return;
    }
    const res: any = await $fetch(
      `/star/starMember?memberId=${state?.memberId}`,
      {},
      { method: "POST" }
    );

    const outTradeNo = res?.orderSn;
    const subject = res?.orderSn;
    const totalAmount = res?.memberPrice;

    await $fetch("alipay/webPay", {
      outTradeNo,
      subject,
      totalAmount,
    });

    let system = navigator.userAgent;
      let isAndroid =
        system.indexOf("Android") > -1 || system.indexOf("Adr") > -1; // android终端
      let isiOS = !!system.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
      const url = `https://www.ifestive365.com:8085/alipay/webPay?outTradeNo=${outTradeNo}&subject=${subject}&totalAmount=${totalAmount}`
      // 使用
      if (isAndroid) {
        //android终端
        console.log("我是安卓");
        window.open(url);
      } else if (isiOS) {
        //ios终端
        console.log("我是ios");
        window.location.href = url;
      }

    // window.open(
    //   `https://47.101.149.72:8085/alipay/webPay?outTradeNo=${outTradeNo}&subject=${subject}&totalAmount=${totalAmount}`
    // );
    // navigate("/club/success");
  };

  return (
    <div className="that_step_two">
      <ul className="that_pay_type">
        <li>
          <div className="weixin">微信支付</div>
          <em
            onClick={() => {
              setPayType(0);
            }}
            className={`common_rem ${payType === 0 ? "isChecked" : ""}`}
          />
        </li>
        <li>
          <div className="alipay">支付宝支付</div>
          <em
            onClick={() => {
              setPayType(1);
            }}
            className={`common_rem ${payType === 1 ? "isChecked" : ""}`}
          />
        </li>
      </ul>

      <div className="item_protocol">
        <em
          onClick={() => dispatch({ isReaded: !state?.isReaded })}
          className={`common_rem ${state?.isReaded ? "isChecked" : ""}`}
        ></em>
        <div>
          我同意
          <span onClick={() => dispatch({ buyVisible: true })}>购买守则</span>和
          <span onClick={() => dispatch({ refundVisible: true })}>
            退款政策，
          </span>
          我也同意支付以下所示的总金额（含服务费）。
        </div>
      </div>
      <div className="item_footer">
        <div className="total">
          合计:<span>￥</span>
          <span>{268.0}</span>
        </div>
        <Button onClick={() => handleBuy()}>现在支付</Button>
      </div>

      <BuyProtocol
        visible={state?.buyVisible}
        onClose={() => dispatch({ buyVisible: false })}
      />
      <RefundProtocol
        visible={state?.refundVisible}
        onClose={() => dispatch({ refundVisible: false })}
      />
    </div>
  );
};

export default StepTwo;
